<template>
	<div>
		<!--<div class="dialog-wrap" v-if="isShow">
			<div class="dialog-cover" @click="close"></div>
			<div class="dialog-content">
				<p class="dialog-close" @click="close">x</p>
				<slot>empty</slot>
			</div>
		</div>-->
		<div class="dialog-wrap">
			<div class="dialog-cover" v-if="isShow" @click="close"></div>
			<transition name="drop">
				<div class="dialog-content" v-if="isShow">
					<p class="dialog-close" @click="close">x</p>
					<slot>empty</slot>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			isShow: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				
			}
		},
		methods: {
			close () {
				this.$emit('on-close')
			}
		}
	}
</script>

<style scoped="scoped">
	.dialog-wrap {
	  position: fixed;
	  width: 100%;
	  height: 100%;
	}
	.dialog-cover {
	  background: #000;
	  opacity: .3;
	  position: fixed;
	  z-index: 5;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	}
	.dialog-content {
	  width: 50%;
	  position: fixed;
	  max-height: 50%;
	  overflow: auto;
	  background: #fff;
	  top: 20%;
	  left: 50%;
	  margin-left: -25%;
	  z-index: 10;
	  border: 2px solid #464068;
	  padding: 2%;
	  line-height: 1.6;
	}
	.dialog-close {
	  position: absolute;
	  right: 5px;
	  top: 5px;
	  width: 20px;
	  height: 20px;
	  text-align: center;
	  cursor: pointer;
	}
	.dialog-close:hover {
	  color: #4fc08d;
	}
	
	.drop-enter-active {
	  transition: all .8s ease;
	}
	.drop-leave-active {
	  transition: all .5s ease;
	}
	.drop-enter {
	  transform: translateY(-500px);
	}
	.drop-leave-active {
	  transform: translateY(-500px);
	}
</style>